<template>
  <view class="edit-container">
    <!-- 信息行：增加图标和柔和背景 -->
    <view class="info-row">
      <uni-icons type="location-filled" size="18" color="#81C784"></uni-icons>
      <text class="info-text">{{ formData.city || '未知位置' }}</text>
      <uni-icons type="partly-cloudy" size="18" color="#64B5F6"></uni-icons>
      <text class="info-text">{{ formData.weather || '未知天气' }}</text>
      <uni-icons type="thermometer" size="18" color="#FFB74D"></uni-icons>
      <text class="info-text">{{ formData.temp ? `${formData.temp}℃` : '--' }}</text>
    </view>

    <!-- 日期选择器：改为卡片风格 -->
    <picker mode="date" :value="formData.date" @change="dateChange">
      <view class="date-picker">
        <uni-icons type="calendar" size="20" color="#47b3e1"></uni-icons>
        <text class="date-text">{{ formData.date || '选择日期' }}</text>
      </view>
    </picker>

    <!-- 输入区：扩大高度和柔和边框 -->
    <textarea v-model="formData.content" placeholder="记录此刻的心情..." placeholder-class="placeholder-style"
      class="content-textarea"></textarea>

    <!-- 保存按钮：渐变风格 -->
    <button class="save-btn" @click="saveDiary" :hover-class="'save-btn-hover'">
      保存日记
    </button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        formData: {
          date: this.getToday(),
          city: '',
          weather: '',
          temp: '',
          content: '',
          // 用于区分新增/编辑
          mode: 'add',
          index: -1
        }
      }
    },
    onLoad(option) {
      const urlData = JSON.parse(decodeURIComponent(option.data || '{}'))
      this.formData = {
        ...this.formData,
        ...urlData
      }
      console.log(this.formData);
    },
    methods: {
      // 获取当前日期（格式：YYYY-MM-DD）
      getToday() {
        const date = new Date()
        return date.toISOString().split('T')[0]
      },

      dateChange(e) {
       /* // 解析日期字符串（格式：YYYY-MM-DD）
        const [year, month, day] = e.detail.value.split('-')
        
        // 转换为 yymmdd 格式（例：2024-05-30 → 240530）
        const yyyy = year               // 取年份后两位
        const mm = month.padStart(2, '0')       // 补零（5 → 05）
        const dd = day.padStart(2, '0')         // 补零（3 → 03）
        const date = `${yyyy}${mm}${dd}`           // 组合成240530
      
        // 构建请求 URL ---免费版无时光机功能
        const locationUrl = `https://api.qweather.com/v7/historical/weather?location=${this.formData.locationId}&date=${date}&key=5bc0c264c54b418b8da2e11f771fbeb6`
        console.log('请求URL:', locationUrl)
      
        // 发送请求（需异步处理）
        uni.request({
          url: locationUrl,
          method: 'GET',
          success: (res) => {
            console.log('响应数据:', res.data)
            // 处理返回数据...
          },
          fail: (err) => {
            console.error('请求失败:', err)
          }
        }) */

        this.formData.date = e.detail.value
      },

      // 保存日记
      saveDiary() {
        const diaries = uni.getStorageSync('diaries') || []

        // 编辑模式替换原数据
        if (this.formData.mode === 'edit') {
          diaries.splice(this.formData.index, 1, this.formData)
        } else {
          diaries.push(this.formData)
        }

        uni.setStorageSync('diaries', diaries)
        uni.showToast({
          title: '保存成功'
        })
        uni.navigateBack()
      }
    }
  }
</script>
<style lang="scss">
  .edit-container {
    padding: 20px;
    background-color: #fafafa;
    min-height: 100vh;
  }

  .info-row {
    background: #E8F5E9;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .info-text {
      color: #666;
      font-size: 14px;
    }
  }

  .date-picker {
    background: #E3F2FD;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;

    &:active {
      background: #BBDEFB;
    }

    .date-text {
      color: #424242;
      font-size: 15px;
    }
  }

  .content-textarea {
    width: 90%;
    height: 300px;
    margin: 20px 0;
    padding: 16px;
    border-radius: 8px;
    background: white;
    border: 1px solid #E0E0E0;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    transition: border-color 0.3s;

    &:focus {
      border-color: #81C784;
    }
  }

  .placeholder-style {
    color: #BDBDBD;
  }

  .save-btn {
    background: linear-gradient(135deg, #9dc7b4, #a3cfbb);
    color: white;
    border-radius: 25px;
    font-size: 16px;
    padding: 12px 0;
    box-shadow: 0 4px 6px rgba(129, 199, 132, 0.2);
    border: none;

    &-hover {
      opacity: 0.9;
      transform: scale(0.98);
    }
  }
</style>